<template>
    <div class="main">
        <router-view></router-view>
        <van-tabbar  v-model="active" active-color="#f9c653" inactive-color="#777" @change="switchPages(active)">
            <van-tabbar-item v-for="(item, index) in tabsData" :key="index">
                <span>{{ item.name }}</span>
                <template #icon="props">
                    <img :src="props.active ? item.image_selected_url : item.image_unselected_url" />
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script setup lang="ts">
import { getInit } from "../api/api"
import { ref, onMounted } from 'vue';
import { useRouter } from "vue-router";
let active: any = ref<number>(0);
let tabsData: any = ref<Array<any>>([])
let tabsPathData:Array<any>=([
    {
    path: '/home'
    },
    {
    path: '/classList'
    },
    {
    path: ''
    },
    {
    path: '/collect'
    },
    {
    path: '/my'
    }
])
let router:any=useRouter()
let switchPages: (index: number) => void = (index: number): void => {
    router.push(tabsPathData[index].path)
}
onMounted((): void => {
    getInit().then((res: any) => {
        res.data.result.tabs.map((item:any,index:number)=>{
            if(index===1){
                item.image_selected_url=require("../assets/classlist-active.png")
                item.image_unselected_url=require("../assets/classlist.png")
                item.name ="分类"
            }
            tabsData.value.push(item)
        })
    }).catch((err: any) => {
        console.log(err)
    })
})
</script>

<style scoped lang="scss"></style>